import React, { useEffect } from 'react';
import { DOCNAME, ip, port } from '../constants/index';
import styles from '../assets/css/MapContain.modules.css';
import { getFeatures, hide, show } from '../common';
// import { useMap } from '../store/hooks/useMap'
import '../assets/css/common.css';
import { useState } from 'react';
import LayersTree from '../components/LayersTree';
const MapContainer = ({ map, layer }) => {
  const [hasPassMap, setHasPassMap] = useState(false);
  const [treeData, setTreeData] = useState();
  // const [layer, setLayer] = useState(gaodeVector)
  const Toggle = () => {
    if (map) {
      const layers = map.getLayers().getArray();
      layers.forEach((item, i) => {
        if (layer == 0 || layer == 1) {
          if (i == layer || i == 3) {
            item.setVisible(true);
          } else {
            item.setVisible(false);
          }
        } else if (layer == 2) {
          if (i == 0) {
            item.setVisible(true);
          }
          if (i == 1) {
            item.setVisible(false);
          }
          if (i == 2) {
            item.setVisible(true);
          }
        }
      });
    }
  };

  useEffect(() => {
    Toggle();
  }, [layer]);
  useEffect(() => {
    getFeatures((data) => {
      setTreeData(data);
    });
  }, []);
  const toggleShow = (showKeys, hidenKeys) => {
    show(map.getLayers().getArray()[3], showKeys.join(','));
    hide(map.getLayers().getArray()[3], hidenKeys.join(','));
  };
  return (
    <div id="map" className={styles.map}>
      <LayersTree treeData={treeData} toggle={toggleShow} />
    </div>
  );
};

export default MapContainer;
